<script setup lang='ts'>
import { ref, computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useProducts } from '../../composables/useProducts'
import { useCart } from '../../composables/useCart'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '../../stores/auth'

// 定义轮播图类型
interface Slide {
  id: number;
  imageUrl: string;
  link: string;
  title: string;
}

// 模拟轮播图数据
const slides = ref<Slide[]>([
  {
    id: 1,
    imageUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    link: '/client/product/1',
    title: '精选商品1'
  },
  {
    id: 2,
    imageUrl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    link: '/client/product/2',
    title: '精选商品2'
  },
  {
    id: 3,
    imageUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    link: '/client/product/3',
    title: '精选商品3'
  },
  {
    id: 4,
    imageUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    link: '/client/product/4',
    title: '精选商品4'
  }
]);

// 处理轮播图点击事件
const handleSlideClick = (link: string) => {
  if (link) {
    router.push(link);
  }
};

const router = useRouter()
const { products } = useProducts()
const { addToCart } = useCart()
const auth = useAuthStore()

const addingIds = ref<Record<string, boolean>>({})

// 搜索筛选商品
const searchKeyword = ref('')
const filteredGoods = computed(() => {
  const kw = searchKeyword.value.trim().toLowerCase()
  let list = products.value
  if (kw) {
    list = list.filter((item: any) =>
      String(item.name || '').toLowerCase().includes(kw) ||
      String(item.description || '').toLowerCase().includes(kw)
    )
  }
  return list
})

async function handleAdd(item: any) {
  const id = String(item.id)
  addingIds.value[id] = true
  try {
    if (!auth.isLoggedIn) {
      ElMessage.warning('请先登录')
      return
    }
    addToCart(item, 1)
    ElMessage.success('已加入购物车')
  } finally {
    addingIds.value[id] = false
  }
}

function goDetail(id: string | number) {
  router.push({ path: `/client/product/${id}` })
}
</script>

<template>
  <div class="clent-seach">
      <!-- 搜索框 -->
      <el-input 
        v-model="searchKeyword" 
        placeholder="请输入商品名称或描述" 
        class="input-with-select" 
        style="width: 600px;height: 40px;margin-left: 30%;border-radius: 10px 10px 0 0;"
      >
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
    </div>
  <div class="client-booton">
      <div class="clent-central">
        <el-row :gutter="24">
          <el-col :span="4">
            <div class="clent-central-lift"><a>男装</a>/<a>女装</a></div>
            <div class="clent-central-lift"><a>运动鞋</a>/<a>休闲鞋</a>/<a>鞋子</a></div>
            <div class="clent-central-lift"><a>办公用品</a>/<a>书籍</a></div>
            <div class="clent-central-lift"><a>笔记本</a>/<a>手机</a>/<a>平板电脑</a></div>
            <div class="clent-central-lift"><a>烹饪食材</a></div>
            <div class="clent-central-lift"><a>白酒</a>/<a>茶叶</a>/<a>咖啡</a></div>
          </el-col>
          <el-col :span="10">
            <div class="clent-central-lift">
              <el-carousel indicator-position="outside">
                <el-carousel-item v-for="slide in slides" :key="slide.id">
                  <div class="carousel-item" @click="handleSlideClick(slide.link)" style="cursor: pointer;">
                    <img 
                      :src="slide.imageUrl" 
                      :alt="slide.title"
                      style="width: 100%;height: 100%; object-fit: cover;"
                    >
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="client-botton-box">
        <!-- 统一展示商品 -->
        <div class="category-section">
          <div class="section-head">
            <div class="title">⭐ 商品推荐</div>
            <div class="desc">为您精选优质商品</div>
          </div>
          <div class="client-boot-content-box">
            <el-row :gutter="24">
              <el-col :span="6" v-for="item in filteredGoods" :key="item.id">
                <div class="client-botton-box-content card">
                  <div class="img-wrap" @click="goDetail(item.id)">
                    <img :src="item.imgs">
                  </div>
                  <div class="name" @click="goDetail(item.id)">{{ item.name }}</div>
                  <div class="price">￥{{ item.saleMoney }}</div>
                  <div class="desc">{{ item.description }}</div>
                  <div>
                    <el-button type="success" round style="width: 100%;" :loading="addingIds[String(item.id)]" @click="handleAdd(item)">加入购物车</el-button>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-empty v-if="!filteredGoods?.length" description="暂无商品" />
          </div>
        </div>
      </div>
    </div>
</template>

<style scoped>
.client-booton{
  width: 97.5%;
  height: 100%;
  margin: auto;
  border-radius: 10px 10px 0 0;
  background-color: aliceblue;
}
.clent-central{
  background-color: aliceblue;
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.clent-central-lift{
  font-size: 18px;
  margin-top: 32px;
  margin-bottom: 32px;
}
.client-botton-box-content{
  width: 100%;
  height: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}
.client-botton-box{
  margin-left: 1.5%;
  margin-right: 1.5%;
}
.category-section{ margin-bottom: 32px; }
.section-head{ display: flex; align-items: baseline; justify-content: space-between; padding: 12px 6px 8px; }
.section-head .title{ font-size: 22px; font-weight: 700; color: #303133; }
.section-head .desc{ font-size: 14px; color: #909399; margin-left: 8px; }
.clent-seach{
  width: 100%;
  height: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
}
.card{ background: #fff; border-radius: 10px; padding: 12px; transition: box-shadow .2s; }
.card:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.img-wrap{ width: 100%; height: 260px; cursor: pointer; }
.img-wrap img{ width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.name{ margin: 8px 0 4px; text-align: center; cursor: pointer; }
.price{ color: #f56c6c; text-align: center; }
.desc{ font-size: 12px; color: #666; height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 6px 8px; }
/* 为每个商品项增加垂直间距 */
.client-boot-content-box :deep(.el-col){
  margin-bottom: 16px;
}
</style>